﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<script src="mui/js/mui.min.js"></script>
	<link href="mui/css/mui.min.css" rel="stylesheet" />
	<script type="text/javascript" src="bingling/js/board.js"></script>
	<script type="text/javascript" src="bingling/js/chess.js"></script>
	<script type="text/javascript" charset="utf-8">
		mui.init();
	</script>


	<style type="text/css">

		html, body {
			width: 100%;
			height: 100%;
		}

		.mui-content {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: lightslategray;
		}

		.content {
			width: 500px;
			height: 600px;
		}

		canvas {
			width: 500px;
			height: 550px;
			border-radius: 3px;
		}

		#popover {
			text-align: center;
			height: 100px;
			width: 200px;
			margin-left: 150px;
		}

		button {
			width: 500px;
			height: 50px;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">中国象棋AI测试版</h1>
	</header>

	<div class="mui-content">
		<div class="content">
			<canvas width="500" height="550"></canvas>

			<div id="popover" class="mui-popover">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell"><a href="#" id="computer_red">电脑执红</a></li>
							<li class="mui-table-view-cell"><a href="#" id="computer_black">电脑执黑</a></li>
						</ul>
					</div>
				</div>
			</div>
			<br />
			<button id="openPopover" class="mui-btn">重新开始</button>
		</div>
	</div>
</body>
</html>

<script type="text/javascript">
	//棋局
	let chess=new Chess();
	chess.show();

	let playerRed=true;

	//打开重开菜单
	document.getElementsByTagName("button")[0].onclick=function(){
		mui("#popover").popover("toggle");
	};
	//选择电脑执红
	document.getElementById("computer_red").onclick=function(){
		chess.view="black";
		restart(1);
		mui("#popover").popover("toggle");
		chess.show();
		playerRed=false;
	};
	//选择电脑执黑
	document.getElementById("computer_black").onclick=function(){
		chess.view="red";
		restart(0);
		playerRed=true;
		mui("#popover").popover("toggle");
		chess.show();
	};

	//重新开始
	function restart(number){
		let xhr=new XMLHttpRequest();
		xhr.open("POST","Start",false);
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4 && xhr.status==200){
				data(xhr.responseText);
			}
		};
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send(number);
	}

	//点击棋盘上某一点
	let canvas = document.getElementsByTagName("canvas")[0];
	canvas.onclick = function (e) {

		let y = e.offsetX;
		let x = e.offsetY;

		x -= 50;
		y -= 50;

		x /= 50;
		y /= 50;

		x = parseInt(Math.round(x));
		y = parseInt(Math.round(y));

		if (x < 0 || x > 9 || y < 0 || y > 8) {
			return;
		}

		if(chess.view=="black"){
			x=9-x;
			y=8-y;
		}

		let xhr=new XMLHttpRequest();
		xhr.open("POST","Click",false);
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4 && xhr.status==200){
				data(xhr.responseText);
			}
		};
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send(JSON.stringify({"X":x,"Y":y}));
	};

	//请电脑出招
	function computer(){
		let xhr=new XMLHttpRequest();
		xhr.open("POST","Computer",true);
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4 && xhr.status==200){
				data(xhr.responseText);
			}
		};
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send();
	}

	//数据解析
	function data(responseText){
		if(responseText!=null&&responseText.length>0){
			let obj=JSON.parse(responseText);
			chess.pieces=obj.pieces;
			chess.mays=obj.mays;
			chess.selects=obj.selects;
			chess.show();

			computer();
		}
	}
</script>